<template>
  <div class="rechargedetails">
    <integralNav></integralNav>
    <div class="writing_right">
      <div class="TitleList">
        <div class="TitleList_padding pointsdetails_title">
          <div class="TitleList_top">
            <div class="pointsdetails_title_left">
              <div class="TitleList_top_title"><span></span>发票申请</div>
            </div>
            <div class="pointsdetails_title_right">
              <div class="title_right_dt">
                <div class="right_dt_btn" @click="getOrders() ">申请发票</div>
              </div>
            </div>
          </div>
        </div>
        <div class="pointsdetails_content">
          <div class="allflow" v-loading="loading" element-loading-spinner="el-icon-loading"
					element-loading-text="拼命加载中" element-loading-background="rgba(255, 255, 255, 1)">
            <div class="allflow_content">
              <div class="allflow_content_list">
                <div class="content_list_li">发票类型</div>
                <div class="content_list_li">发生时间</div>
                <div class="content_list_li">发票抬头</div>
                <div class="content_list_li">税号</div>
                <div class="content_list_li">发票金额</div>
                <div class="content_list_li">接收邮件</div>
                <div class="content_list_li center">开具状态</div>
                <div class="content_list_li center">下载发票</div>
                <div class="content_list_li center">备注</div>
              </div>
            </div>
            <div class="allflow_content">
              <div class="allflow_content_list" v-for="item in infos.data">
                <div class="content_list_li">{{ item.is_special_ticket ? '电子专票' : '电子普票' }}</div>
                <div class="content_list_li">{{ item.create_time }}</div>
                <div class="content_list_li">{{ item.company_name }}</div>
                <div class="content_list_li">{{ item.tax_id }}</div>
                <div class="content_list_li">￥{{ item.amount_of_money }}.00</div>
                <div class="content_list_li">{{ item.email }}</div>
                <div class="content_list_li center">{{item.is_invoicing?'已开具':'未开具'}}</div>
                <div class="content_list_li center"><a :href="item.invoice_attachment" target="_blank" v-if="item.is_invoicing">下载</a></div>
                <div class="content_list_li center">{{item.remarks?item.remarks:'-'}}</div>
              </div>


              <div class="not_data not_data2" v-show="infos.data.length===0">
                <div class="not_data_icon"><img src="@a/img/bg26.jpg"/></div>
                <div class="not_data_title">暂无数据</div>
              </div>
            </div>
            <div class="page">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="infos.current_page"
                  :page-sizes="per_pages"
                  :page-size="infos.per_page"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="infos.total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 充值弹窗 -->
    <rechargeWindow v-if="rechargeShow" @close="rechargeShow = false"></rechargeWindow>

    
    <!-- 选择开票订单弹窗 -->
    <div class="Preview" v-show="showPreview" >
      <div class="Preview_content">
        <div class="Preview_content_title">
            <div class="content_title_left"><span></span>选择开票订单</div>
            <div class="content_title_right" @click="showPreview = !showPreview"><i class="el-icon-close"></i></div>
        </div>
        <div class="Preview_content_txt">
          <div class="content_txt_title">
            <div class="txt_title_list">选择</div>
            <div class="txt_title_list">订单号</div>
            <div class="txt_title_list">时间</div>
            <div class="txt_title_list">支付方式</div>
            <div class="txt_title_list">金额</div>
          </div>
          <div class="content_txt_con ovauto" v-loading="preview_loading">
            <div class="txt_con_list" v-for="bill in bills" :key="bill.id">
              <div class="con_list_li">
                <input type="checkbox" v-model="bill.checked" />
              </div>
              <div class="con_list_li">{{ bill.order_number }}</div>
              <div class="con_list_li">{{ bill.create_time }}</div>
              <div class="con_list_li">{{ bill.payment_method }}</div>
              <div class="con_list_li">{{ bill.total_amount }}.00</div>
            </div>
          </div>
          <div class="Preview_content_btn">
            <span class="notBlue on" @click="selectAll()">全选</span>
            <span class="notBlue" @click="selectNone()">反选</span>
          </div>
          <div class="Preview_content_next notBlue" @click="nextStep()">下一步</div>
        </div>
      </div>
    </div>

    
    <!-- 填写开票信息弹窗 -->
    <div class="Preview" v-show="billShow">
      <div class="Preview_content">
        <div class="Preview_content_title">
            <div class="content_title_left"><span></span>填写开票信息</div>
            <div class="content_title_right" @click="billShow = !billShow"><i class="el-icon-close"></i></div>
        </div>
        <div class="Preview_content_con">
          <div class="content_con_list">
            <div class="con_list_li">
              <div class="list_li_left">个人/企业：</div>
              <div class="list_li_right"><div class="button">企业</div></div>
            </div>
            <div class="con_list_li hot radio">
              <div class="list_li_left">发票类型：</div>
              <div class="list_li_right">
                <el-radio v-model="radio" label="0">增值税电子普通发票</el-radio>
                <!-- <el-radio v-model="radio" label="1">增值税电子专用发票</el-radio> -->
              </div>
            </div>
            <div class="con_list_li hot">
              <div class="list_li_left">公司名称：</div>
              <div class="list_li_right"><el-input v-model="input1" placeholder="请输入内容"></el-input></div>
            </div>
            <div class="con_list_li hot">
              <div class="list_li_left">纳税人识别号：</div>
              <div class="list_li_right"><el-input v-model="input2" placeholder="请输入内容"></el-input></div>
            </div>
            <div class="con_list_li hot">
              <div class="list_li_left">发票金额：</div>
              <div class="list_li_right">
                <el-input
                  placeholder="请输入内容"
                  v-model="input3"
                  :disabled="true">
                </el-input>
              </div>
            </div>
            <div class="con_list_li hot">
              <div class="list_li_left">发票内容：</div>
              <div class="list_li_right">
                <el-radio v-model="radio2" label="网络技术服务费">网络技术服务费</el-radio>

              </div>
            </div>
            <div class="con_list_title">联系信息</div>
            <div class="con_list_li hot">
              <div class="list_li_left">电子邮件：</div>
              <div class="list_li_right"><el-input v-model="input4" placeholder="请输入内容"></el-input></div>
            </div>
            <div class="con_list_li">
              <div class="list_li_left">备注：</div>
              <div class="list_li_right">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4}"
                  placeholder="请输入内容"
                  v-model="textarea">
                </el-input>
              </div>
            </div>
            <div class="con_list_btn notBlue" @click="confirmInvoice()">确认开票</div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>


<script>
import integralNav from "@c/common/integralNav/integralNav";
import rechargeWindow from "@c/common/rechargeWindow/rechargeWindow";

export default {
  name: "rechargeDetails",
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      radio: '0',
      radio2: '网络技术服务费',
      textarea: '',
      rechargeShow: false,
      billShow: false,
      interval: null,
      rechargepoints: false,
      showPreview: false,
      RechargeSuccessful: false,
      activeTab: 0,
      infos: {
        data: [],
        per_page: 10,
        current_page: 1,
        last_page: 1,
        total: 0
      },
      preview_loading: true,
      default_index: 0,
      can_swiper: false,
      per_pages: [10, 20, 30],
      rechargeList: [],
      amoney: 0,
      aintegral: 0,
      result: 0,
      totalMoney: 0,
      toInvoiceIds: [],
      images: require("@a/img/bn21.png"),
      loading: true,
      bills: [
          {
            id: 1,
            orderNumber: "Bot20232515685",
            paymentTime: "2023-05-18 12:23:45",
            paymentMethod: "支付宝",
            amount: "￥2699.00",
            checked: false // 添加一个属性用于表示是否选中，默认为false
          },
          {
            id: 2,
            orderNumber: "Bot20232515686",
            paymentTime: "2023-05-19 10:35:21",
            paymentMethod: "微信支付",
            amount: "￥1899.00",
            checked: false
          },
          {
            id: 3,
            orderNumber: "Bot20232515687",
            paymentTime: "2023-05-20 15:12:55",
            paymentMethod: "银行卡支付",
            amount: "￥3299.00",
            checked: false
          }
        ]
    };
  },
  components: {
    integralNav,
    rechargeWindow
  },
  methods: {
    nextStep(){
      let selectedIds = [];
      let moneySum = 0;
      this.bills.forEach(bill => {
        if (bill.checked) {
          selectedIds.push(bill.id);
          moneySum += parseFloat(bill.total_amount);
        }
      });
      console.log(selectedIds);
      console.log(moneySum);
      if(selectedIds.length === 0){
        this.$message({
          message: '请选择需要开票的订单',
          type: 'warning'
        });
        return false;
      }
      this.totalMoney = moneySum;
      this.input3 = moneySum;
      this.toInvoiceIds = selectedIds;
      this.billShow = true;
      this.showPreview = false;
    },
    confirmInvoice(){
      let data = {
        is_special_ticket: this.radio,
        company_name: this.input1,
        tax_id: this.input2,
        amount_of_money: this.input3,
        email: this.input4,
        content: this.radio2,
        remarks: this.textarea,
        related_orders: this.toInvoiceIds
      };
      let that = this;
      that.axios.post('/api1/OrderInvoice/add', data).then(res => {
        // loading结束
        if(res.code === 1){
          that.$message({
            message: '开票成功',
            type: 'success'
          });
          that.billShow = false;
          that.getList();
        }

      })
    },
    selectAll() {
      // 全选按钮触发的方法
      this.bills.forEach(bill => (bill.checked = true));
      this.bills = JSON.parse(JSON.stringify(this.bills))
    },
    selectNone() {
      // 反选按钮触发的方法
      this.bills.forEach(bill => (bill.checked = !bill.checked));
      this.bills = JSON.parse(JSON.stringify(this.bills))
    },
    openProtocol() {
      window.open('https://www.ai-dog.net/serviceAgreement.html', '_blank');
    },
    showWindow(){
      let that = this;
      that.rechargeShow = true;
    },
    closeWindow(){
      let that = this;
      that.rechargepoints = false;
      clearInterval(that.interval)
      that.getList()
    },
    //分页
    handleSizeChange(val) {
      this.infos.per_page = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.infos.current_page = val
      this.getList()

    },
    handleChildClick(money, integral, images) {
      this.amoney = money
      this.aintegral = integral
      this.images = images
    },
    getList() {
      // loading 开始
      this.loading = true;

      let that = this;
      that.axios.get('/api1/OrderInvoice/list', {
        params: {
          page: that.infos.current_page,
          list_rows: that.infos.per_page,
        }
      }).then(res => {
        // loading结束
        this.loading = false;

        that.infos = res.result;

      })
    },
    getOrders(){
      let that = this;
      this.showPreview = true;
      that.preview_loading = true;
      that.axios.post('/api1/newOrders/getList').then(
          res => {
            if (res.code === 1) {
              that.bills = res.result;
              that.bills.forEach(bill => {
                bill.checked = false;
              });
              that.preview_loading = false;
            }
          }
      )
    },


  },
  mounted() {
    this.result = Number(this.aintegral) + Number(this.balance);
  },
  created() {
    this.getList()
  }
}
</script>

<style>
@import "rechargeDetails.css";
</style>
